<template>
  <div id="DiagnosticReport">
    <!--工单信息-->
    <div class="gdInfo">
      <h2 class="itemTitle">工单信息</h2>
      <van-form validate-first>
        <van-field label="工单编号" :value="taskReport.orderNumber" readonly/>
        <van-field label="服务站代码" :value="taskReport.stationCode" readonly/>
        <van-field label="服务站名称" :value="taskReport.stationName" readonly/>
        <van-field label="技师账号" :value="taskReport.suserName" readonly/>
        <van-field label="技师姓名" :value="taskReport.suserRealName" readonly/>
        <van-field label="技师电话"
                   v-model="taskReport.suserPhone"
                   name="mobilePhoneValid"
                   :rules="[{ validator:mobilePhoneValid, message: '手机号格式错误' }]"
                   required
                   placeholder="请输入技师电话"
                   class="phoneInput"/>
      </van-form>
    </div>
    <!--故障描述-->
    <div class="gdInfo">
      <h2 class="itemTitle">故障描述</h2>
      <van-form>
        <van-field
            v-model="taskReport.dtDesc"
            rows="3"
            autosize
            type="textarea"
            placeholder="请输入故障描述"
        />
      </van-form>
    </div>
    <!--处理方式-->
    <div class="gdInfo">
      <h2 class="itemTitle">处理方式</h2>
      <van-form>
        <van-field
            v-model="taskReport.handleMethod"
            rows="3"
            autosize
            type="textarea"
            placeholder="请输入处理方式"
        />
      </van-form>
    </div>
    <!--故障描述-->
    <div class="gdInfo">
      <h2 class="itemTitle">首次诊断故障码</h2>
      <!--表格-->
      <TableComponent :tableData="dtCodeFirstShow" :option="heardOption"/>
      <!--查看更多-->
      <div class="mt-1 columnCC" v-if="dtCodeFirst.length>1">
        <van-button
            @click="scOpenOrClose"
            type="info" size="mini"
                    :loading="false"
                    loading-type="spinner"
                    loading-text="加载中..."
        >{{dtCodeFirstShow.length<=1?"查看更多":'收起'}}
          <van-icon name="arrow-down"/>
        </van-button>
      </div>
    </div>
    <div class="gdInfo">
      <h2 class="itemTitle">末次诊断故障码</h2>
      <!--表格-->
      <TableComponent :tableData="dtCodeEnd" :option="heardOption"/>
    </div>
    <!--诊断记录-->
    <div style="padding-bottom: 16vh">
      <div class="gdInfo"
           v-for="(item,index) in reportTask" :key="index"
      >
        <h2 class="itemTitle">诊断记录</h2>
        <van-form validate-first>
          <van-field label="技术账号" :value="item.suserName" readonly/>
          <van-field label="所属服务站" :value="item.suserStation" readonly/>
        </van-form>
        <!--记录条-->
        <van-steps
            :border="false"
            direction="vertical" :active="2">
          <van-step
              v-for="(itemS,indexS) in item.items" :key="indexS"
          >
            <h3>{{itemS.ctime}} 技师:{{item.suserName}}</h3>
            <van-collapse class="mt-1" :border="false" v-model="activeNames">
              <van-collapse-item  :title="itemS.operation" :name="indexS">
                <div v-for="(itemT,indexT) in itemS.items" :key="indexT">{{itemT.operation}}</div>
              </van-collapse-item>
            </van-collapse>
          </van-step>
        </van-steps>
      </div>
    </div>
    <!--test-->
    <div class="columnCC mt-2" v-if="!taskReport.isDetail">
      <van-button type="info" class="widthPC-60 fixed-center-top97" size="small" @click="taskReportAddReq">提交报告</van-button>
    </div>
    <!--<h5>-->
      <!--app获取的数据{{taskReport}}-->
    <!--</h5>-->
    <!--<h5>-->
      <!--请求详情数据 {{taskReportGetData}}-->
    <!--</h5>-->
  </div>

</template>
<script>
  // import { mapState, mapMutations, mapActions } from 'vuex'
  // import TableComponent from './component/TableComp'

  export default {
    name: 'DiagnosticReport',
    components: {
      TableComponent,
    },
    // mixins: [validMixins],
    props: {
      // treeData: Array,
    },
    // mixins: [validMixins],
    data() {
      return {
        //app传递过来的data
        appPageBaseData:{},
        jsPhone: "",
        activeNames: ['1'],
        appData:null,
        //表格头
        heardOption: {
          column: [
            {
              label: '故障码',
              prop: 'code'
            },
            {
              label: '故障码描述',
              prop: 'dtDesc'
            },
            {
              label: '等级',
              prop: 'grade'
            },
            {
              label: '状态',
              prop: 'dtState'
            }
          ]
        },
        /*请求提交的数据*/
        taskReport:{
          "orderNumber":"",
          "stationCode":"",
          "suserName":"",
          "suserRealName":"",
          "suserPhone":"",
          "dtDesc":"",
          "handleMethod":"",
          "isDetail": false,
          "stationName":"",
        },
        dtCodeFirst :[
          {
            "code":"45454",//故障码
            "dtDesc":"1233455",//故障码描述
            "grade":"wxy",//等级
            "dtState":"王",//状态
            "type":1//故障码分类，首次故障码传1
          },
          {
            "code":"45454",//故障码
            "dtDesc":"1233455",//故障码描述
            "grade":"wxy",//等级
            "dtState":"王",//状态
            "type":1//故障码分类，首次故障码传1
          }
        ], //2.首次诊断故障码
        dtCodeFirstShow:[ {
          "code":"45454",//故障码
          "dtDesc":"1233455",//故障码描述
          "grade":"wxy",//等级
          "dtState":"王",//状态
          "type":1//故障码分类，首次故障码传1
        },],
        dtCodeEnd :[
          {
            "code":"45454",//故障码
            "dtDesc":"1233455",//故障码描述
            "grade":"wxy",//等级
            "dtState":"王",//状态
            "type":2//故障码分类，未次故障码传2
          }
        ], //3.未次诊断故障码
        reportTask: [
          {
            "id": 2297,//诊断记录ID
            "ctime": "2020-07-15 17:04:53",//创建时间
            "code": "7b7977c5-0196-4d05-b73d-b44ae29b3e67",//诊断记录标识
            "generalTaskCode": "42fc3370-c13c-416d-b538-611167e95f9d",//工单号
            "suserName": "zyw",//技师用户名
            "cuserName": "",//专家用户名
            "source": 1,//诊断类型，1本地诊断，2远程诊断
            "suserStation": "莱动",//技师服务站
            "suggestion": "",//专家建议方案
            "operationLogs"://操作模块列表
              [
                {
                  "id": 1020,//操作模块ID
                  "ctime": "2020-07-10 17:05:57",// 操作时间
                  "category": "88394a40-6fb5-429f-9fab-2c284a6f5969",//组别编码
                  "operation": "参数监测",//操作名称
                  "method": "参数监测",//方法名称
                  "code": "cf379693-06ad-40b7-9c93-d71d879133fa",//诊断记录标识
                  "logItems": //操作明细项
                    [
                      {
                        "id": 2434,//操作项ID
                        "ctime": "2020-07-10 16:40:12",//创建时间
                        "category": "4c0c7c2f-a61a-4af5-8458-6e78ac42ffe4",//组别编码
                        "operation": "读取当前故障码(13)",//操作名称
                        "result": "{\"dtcItems\":[{\"check\":\"\",\"code\":\"P0118\",\"content\":\"发动机冷却液温度传感器电路电压过高或开路\",\"id\":\"100000036_01180027@P0118\",\"occurrencecount\":0,\"reason\":\"\",\"result\":\"\",\"severity\":0,\"status\":\"Not Active\",\"style\":1,\"xset\":\"\",\"sid\":36},{\"check\":\"\",\"code\":\"P2122\",\"content\":\"油门踏板位置1信号短路到低电压或开路\",\"id\":\"100100050_212200AF@P2122\",\"occurrencecount\":0,\"reason\":\"\",\"result\":\"\",\"severity\":0,\"status\":\"Active\",\"style\":1,\"xset\":\"\",\"sid\":50},{\"check\":\"\",\"code\":\"P2127\",\"content\":\"油门踏板位置2信号短路到低电压或开路\",\"id\":\"100200052_212700AF@P2127\",\"occurrencecount\":0,\"reason\":\"\",\"result\":\"\",\"severity\":0,\"status\":\"Active\",\"style\":1,\"xset\":\"\",\"sid\":52},{\"check\":\"\",\"code\":\"P2104\",\"content\":\"发动机强制怠速\",\"id\":\"100300045_210400AF@P2104\",\"occurrencecount\":0,\"reason\":\"\",\"result\":\"\",\"severity\":0,\"status\":\"Active\",\"style\":1,\"xset\":\"\",\"sid\":45},{\"check\":\"\",\"code\":\"P2110\",\"content\":\"发动机限制转速\",\"id\":\"100400048_211000AF@P2110\",\"occurrencecount\":0,\"reason\":\"\",\"result\":\"\",\"severity\":0,\"status\":\"Active\",\"style\":1,\"xset\":\"\",\"sid\":48},{\"check\":\"\",\"code\":\"P0222\",\"content\":\"节气门位置2信号短路到低电压或开路\",\"id\":\"100500042_022200AF@P0222\",\"occurrencecount\":0,\"reason\":\"\",\"result\":\"\",\"severity\":0,\"status\":\"Active\",\"style\":1,\"xset\":\"\",\"sid\":42},{\"check\":\"\",\"code\":\"P0123\",\"content\":\"节气门位置1信号短路到高电压或开路\",\"id\":\"100600041_012300AF@P0123\",\"occurrencecount\":0,\"reason\":\"\",\"result\":\"\",\"severity\":0,\"status\":\"Active\",\"style\":1,\"xset\":\"\",\"sid\":41},{\"check\":\"\",\"code\":\"P0113\",\"content\":\"进气温度传感器短路到高电压或开路\",\"id\":\"100700032_01130027@P0113\",\"occurrencecount\":0,\"reason\":\"\",\"result\":\"\",\"severity\":0,\"status\":\"Not Active\",\"style\":1,\"xset\":\"\",\"sid\":32},{\"check\":\"\",\"code\":\"P0452\",\"content\":\"油箱压力传感器短路到低电压或开路\",\"id\":\"100800100_04520027@P0452\",\"occurrencecount\":0,\"reason\":\"\",\"result\":\"\",\"severity\":0,\"status\":\"Not Active\",\"style\":1,\"xset\":\"\",\"sid\":100},{\"check\":\"\",\"code\":\"P0685\",\"content\":\"主继电器故障\",\"id\":\"100900114_068500AF@P0685\",\"occurrencecount\":0,\"reason\":\"\",\"result\":\"\",\"severity\":0,\"status\":\"Active\",\"style\":1,\"xset\":\"\",\"sid\":114},{\"check\":\"\",\"code\":\"P2454\",\"content\":\"GPF压差传感器1短路到低电压或开路\",\"id\":\"101000126_24540027@P2454\",\"occurrencecount\":0,\"reason\":\"\",\"result\":\"\",\"severity\":0,\"status\":\"Not Active\",\"style\":1,\"xset\":\"\",\"sid\":126},{\"check\":\"\",\"code\":\"P2460\",\"content\":\"GPF压差传感器2短路到低电压\",\"id\":\"101100128_24600027@P2460\",\"occurrencecount\":0,\"reason\":\"\",\"result\":\"\",\"severity\":0,\"status\":\"Not Active\",\"style\":1,\"xset\":\"\",\"sid\":128},{\"check\":\"\",\"code\":\"P0546\",\"content\":\"GPF入口温度传感器短路到高电压或开路\",\"id\":\"101200132_05460027@P0546\",\"occurrencecount\":0,\"reason\":\"\",\"result\":\"\",\"severity\":0,\"status\":\"Not Active\",\"style\":1,\"xset\":\"\",\"sid\":132}],\"message\":\"操作成功\",\"enOK\":true}"
                      }
                    ]
                }
              ]
          }
        ], //诊断记录
        /*请求返回的数据*/
        taskReportGetData:{},

      }
    },
    computed: {
      // ...mapState('user', ['token', 'userInfo'])
    },
    watch: {
      // 'cmAddForm.enginePlatform': function(val) {
      //   console.log('enginePlatformval', val)
      //   if (val) {
      //     this.emissionOptionReq()
      //   }
      // }
    },
    created() {

    },
    mounted() {
      console.log("查看windows对象信息");
      let appPageBaseData={};
      if(!(window.Platform&&window.Platform.getSDKParam())){
        this.$toast("app传递过来的数据为空");
        return;
      }
      appPageBaseData=window.Platform.getSDKParam()
      // appPageBaseData={
      //   "orderNumber": "b1f61171-2a57-4a76-99e1-f9aa6924a641",
      //   "suserName": "ZCC",
      //   "suserRealName": "张某某",
      //   "suserPhone": "13566000000",
      //   "stationCode": "THZ",
      //   "stationName": "天河站",
      //   "handleMethod": "水温传感器工作异常导致报故障码，亮故障灯",
      //   "isDetail":false,
      // }
      // appPageBaseData=JSON.stringify(appPageBaseData)
      document.title = '诊断报告'
      /*
      * app需要传递
      *  "orderNumber": "20190818",//工单号
      *  taskReport:{} //基础信息
      * */
      // window.location.orderNumber //获取app的数据
      // this.taskReport.orderNumber=appPageBaseData.orderNumber
      // this.taskReport.suserName=appPageBaseData.username
      // this.taskReport.suserName=appPageBaseData.suserName
      //合并app返回的数据
      this.taskReport=JSON.parse(appPageBaseData);
      //根据工单号获取报告详情
      this.taskReportGetReq(this.taskReport.orderNumber);
    },
    methods: {
      //首次故障诊断码展开和收起
      scOpenOrClose(){
         if(this.dtCodeFirstShow.length<=1){
           this.dtCodeFirstShow=JSON.parse(JSON.stringify(this.dtCodeFirst));
         }else{
           this.dtCodeFirstShow=[this.dtCodeFirst[0]]
         }
      },
      mobilePhoneValid(str) {
        console.log("str", str);
        const reg = /^0?1[0-9]{10}$/
        return reg.test(str)
      },
      // ...mapActions('user', ['closeSideBar']),
      // ...mapMutations('user', ['CHAGE_TOKEN']),
      //app上传诊断报告
      taskReportAddReq() {
        console.log("this.taskReport", this.taskReport);
        if(!this.taskReport.suserPhone){
          this.$toast("请先填写技师电话");
          return;
        }
        delete this.taskReport.isDetail
        let data={
          taskReport :JSON.stringify(this.taskReport),
          dtCodeFirst :JSON.stringify(this.dtCodeFirst),
          dtCodeEnd :JSON.stringify(this.dtCodeEnd),
        }
        console.log(data)
        this.$khReqMethod({
          url: "/scala-api/taskReport/add",data,
          method: 'POST', isLoading: true
        }).then(res => {
          if (res.code === 0) {
            this.$toast.success("报告提交成功");
            //调用app的方法返回
            let timer=setTimeout(()=>{
              clearTimeout(timer)
              window.Platform.onFinish()
            },500)
          }
        })
      },
      //pp获取诊断报告
      taskReportGetReq(orderNumber) {
        let data={orderNumber:orderNumber}
        this.$khReqMethod({
          url: "/scala-api/taskReport/get",data,
          method: 'get', isLoading: true,isParams:true
        }).then(res => {
          console.log("res", res);
          if (res.code === 0) {
            let reqData = res.data;
            let {dtCodeFirst,dtCodeEnd,task}=reqData
            this.taskReportGetData=reqData
            this.dtCodeFirst=dtCodeFirst //首次诊断故障码
            //开始只是显示一个
            if(dtCodeFirst.length>1){
              this.dtCodeFirstShow[0]=dtCodeFirst[0]
            }else{
              this.dtCodeFirstShow=JSON.parse(JSON.stringify(dtCodeFirst));
            }
            this.dtCodeEnd=dtCodeEnd //未次诊断故障码
            this.reportTask=task //诊断记录
          }
        })
      },
    }
  }
</script>

<style lang="scss">
  #DiagnosticReport {
    line-height: 1;
  }

  //工单信息
  .gdInfo {
    .btnItem {
      margin-top: 10px;
      width: 100%;
      h3 {
        font-size: 13px;
        color: #666;
      }
    }
  }

  //title统一样式
  .itemTitle {
    margin-top: 4px;
    padding-left: 18px;
    background-color: #eeeeee;
    height: 35px;
    width: 100%;
    color: #333;
    font-weight: 600;
    font-size: 14px;
    line-height: 35px;
  }
</style>
<style lang="scss">
  #DiagnosticReport {

    .van-cell::after {
      border-bottom: none;

    }
    .van-cell {
      padding: 6px 18px;
    }
    .phoneInput {
      .van-field__control--right {
        border: 1px solid #ddd;
      }
    }
    /*折叠框*/
    .van-cell__right-icon {
      position: absolute;
      left: -5px;
      top: 6px;
    }
    .van-hairline--top-bottom::after, .van-hairline-unset--top-bottom::after {
      border-width: 0!important;
    }
  }

</style>

